<template>
  <div class="table-selected-info" :style="themeStyle">
    <span v-if="count>0">
      <i class="el-icon-circle-check"/> 已选 <span class="selected-count" :style="countStyle">{{ count }}</span> 个
      <a @click="clearSelected" v-if="showClearBt" class="selected-clear-bt" :style="btStyle">清除</a>
    </span>
    <span v-else><i class="el-icon-remove-outline"/> 未选择</span>
  </div>
</template>

<script>
  import {hexToRGB} from '@/utils/cssUtil'

  export default{
    name:'SelectedInfo',
    props:{
      count:{
        type: Number,
        default: 0
      },
      onClearSelected:{
        type: Function,
        default:function(){}
      }
    },
    data(){
      return {
      }
    },
    computed:{
      showClearBt(){
        return this.count && this.count>0 && this.onClearSelected && this.onClearSelected instanceof Function;
      },
      themeStyle(){
        return {
          "background-color": hexToRGB(this.$store.state.settings.theme, 12),
          "border": "1px solid "+hexToRGB(this.$store.state.settings.theme, 40)
         }
      },
      countStyle(){
        return {
          color: this.$store.state.settings.theme
        }
      },
      btStyle(){
        return {
          "background-color": this.$store.state.settings.theme,
          'padding': '3px',
          'margin-left': '2px',
          'border-radius': '5px',
          'color': 'white'
         }
      }
    },
    methods:{
      clearSelected(){
        if(this.onClearSelected && this.onClearSelected instanceof Function){
          this.onClearSelected(this.count)
        }
      }
    }
  }
</script>

<style scoped>
  .table-selected-info{
    border-radius: 4px;
    padding: 4px 20px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    margin-bottom: 2px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;

    i {
      color: #1890FF;
    }
    .selected-count{
      font-weight: bold;
    }
    .selected-clear-bt {
      font-weight: bold;
      text-decoration: none;
      outline: none;
      cursor: pointer;
      background-color: #1890ff;
    }
  }
</style>
